/**
 * @description 非标债券投资要求
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin } from 'antd';
import accounting from 'accounting';
import { SecondHeaderC, TableC, FirstHeaderC } from '../../../comps';

import background1 from '../../../assets/busi/reportingServices/commercialBankManagementReport/year_bg.png';
import background2 from '../../../assets/busi/reportingServices/commercialBankManagementReport/assets_bg.png';
import background3 from '../../../assets/busi/reportingServices/commercialBankManagementReport/weight_bg.png';
import ketou from '../../../assets/busi/reportingServices/tick_icon.png';
import buketou from '../../../assets/busi/reportingServices/cross_icon.png';

import Style from './style.less';
import Cards from './compents/cards';

class nonStandardBond extends PureComponent {
  constructor() {
    super();
    this.state = {
      zcData: {},
      data: [],
      loading: false,
      fbWeight: '',
    };
  }

  componentDidMount() {
    const { searchData } = this.props;
    this.getData1(searchData);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { searchData } = nextProps;

    if (JSON.stringify(searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData1(searchData);
    }
  }

  //获取数据
  getData1 = (payload) => {
    this.setState({ loading: true });
    this.props.dispatch({
      type: 'commercialBankReportM/getZcByYenant',
      payload: { ...payload },
      callback: (res) => {
        if (res) {
          this.setState({
            zcData: res.dataSource,
          });
          this.getData2({
            ...payload,
            zzc: res.dataSource?.zzc,
            zcje: res.dataSource?.zcje,
          });
        }
      },
    });
  };

  //获取数据
  getData2 = (payload) => {
    this.setState({ loading: true });
    this.props.dispatch({
      type: 'commercialBankReportM/getFBBondInvestment',
      payload: { ...payload },
      callback: (res) => {
        if (res) {
          this.setState({
            data: res.data,
            loading: false,
            fbWeight: res.fbWeight,
          });
        } else {
          this.setState({
            data: [],
            loading: false,
            fbWeight: 0,
          });
        }
      },
    });
  };

  onSave1 = (e) => {
    this.setState((pre) => {
      return { zcData: { ...pre.zcData, zcje: e } };
    });
    this.getData2({
      ...this.props.searchData,
      zzc: this.state.zcData?.zzc,
      zcje: e,
    });
  };
  onSave2 = (e) => {
    this.setState((pre) => {
      return { zcData: { ...pre.zcData, zzc: e } };
    });
    this.getData2({
      ...this.props.searchData,
      zcje: this.state.zcData?.zcje,
      zzc: e,
    });
  };
  getRowSpan = (obj, length, index) => {
    const newObj = {};
    let a = 0;

    if (index === 0) a = length;
    for (let i in obj) {
      newObj[i] = a;
    }

    return newObj;
  };

  // 处理合并单元格
  getDataSource = (data) => {
    if (!data) return undefined;
    let arr = [];
    data.map((x) => {
      if (x.info) {
        let arr1 = this.getDataSource(x.info);
        arr = arr.concat(
          arr1.map((y, yindex) => {
            return { ...y, ...x, info: undefined, rowSpan: { ...(y.rowSpan || {}), ...this.getRowSpan(x, arr1.length, yindex) } };
          }),
        );
      } else {
        arr.push(x);
      }
    });
    return arr;
  };

  render() {
    const { zcData, data, fbWeight, loading } = this.state;

    // 和现金报告那不一样，这里是1禁止0通过
    const iconInfo = {
      1: {
        className: 'prohibit',
        img: buketou,
        name: '禁止',
      },
      0: {
        className: 'adopt',
        img: ketou,
        name: '通过',
      },
    };

    return (
      <>
        <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
          <FirstHeaderC title='非标债券投资要求' bottomHeight={false} />
        </div>

        {data[0]?.msg && (
          <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
            <SecondHeaderC
              title={data[0]?.msg}
              bottomHeight={false}
              Left={
                <div className={Style[iconInfo[data[0]?.state]?.className]} style={{ marginLeft: '20px' }}>
                  <img src={iconInfo[data[0]?.state]?.img} />
                  {iconInfo[data[0]?.state]?.name}
                </div>
              }
            />
          </div>
        )}
        <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
          <Spin spinning={loading}>
            <Row gutter={20}>
              <Col span={12}>
                <Cards bgurl={background1} name={'会计年度'} content={zcData?.time}></Cards>
              </Col>
              <Col span={12}>
                <Cards bgurl={background2} name={'资本净额'} unit='元' isEdit={true} content={zcData.zcje} onClick={this.onSave1}></Cards>
              </Col>
            </Row>
          </Spin>
        </div>
        {(data[0]?.dataSource?.length != 0 || loading) && (
          <div name={'syyh-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
            <TableC
              columns={
                data[0]?.columns
                  ?.map((x) => {
                    if (x.key === 'issuer' || x.key === 'sumWeight') {
                      return {
                        ...x,
                        render: (text, row, index) => {
                          const obj = {
                            children: text || '--',
                            props: {},
                          };
                          obj.props.rowSpan = row.rowSpan && row.rowSpan[x.key];
                          return obj;
                        },
                      };
                    }
                    if (x.key == 'amount') {
                      return {
                        ...x,
                        type: 'number',
                      };
                    }
                    if (x.key == 'value') {
                      return {
                        ...x,
                        type: 'money',
                      };
                    }
                    if (x.key == 'weight') {
                      return {
                        ...x,
                        align: 'right',
                      };
                    }
                    return x;
                  })
                  ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }]) //添加空列，解决表头导出的样式问题
              }
              dataSource={this.getDataSource([{ info: data[0]?.dataSource }])}
              // dataSource={data[0]?.dataSource}
              rowClassName={Style.rowclassname}
              hidePage={true}
              loading={loading}
              rowKey={'id'}
            ></TableC>
          </div>
        )}

        {data[1]?.msg && (
          <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
            <SecondHeaderC
              title={data[1]?.msg}
              bottomHeight={false}
              Left={
                <div className={Style[iconInfo[data[1]?.state]?.className]} style={{ marginLeft: '20px' }}>
                  <img src={iconInfo[data[1]?.state]?.img} />
                  {iconInfo[data[1]?.state]?.name}
                </div>
              }
            />
          </div>
        )}
        {(data[1]?.dataSource?.length != 0 || loading) && (
          <div name={'syyh-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
            <TableC
              columns={data[1]?.columns
                ?.map((x) => {
                  if (x.key === 'productName' || x.key === 'sumWeight') {
                    return {
                      ...x,
                      render: (text, row, index) => {
                        const obj = {
                          children: text || '--',
                          props: {},
                        };
                        obj.props.rowSpan = row.rowSpan && row.rowSpan[x.key];
                        return obj;
                      },
                    };
                  }
                  if (x.key == 'amount') {
                    return {
                      ...x,
                      type: 'number',
                    };
                  }
                  if (x.key == 'value') {
                    return {
                      ...x,
                      align: 'right',
                      render: (_, row) =>
                        row.productName == '汇总'
                          ? row.values
                            ? accounting.formatNumber(Number(row.values), 2)
                            : '--'
                          : row.value
                          ? accounting.formatNumber(Number(row.value), 2)
                          : '--',
                    };
                  }
                  if (x.key == 'weight') {
                    return {
                      ...x,
                      align: 'right',
                    };
                  }
                  return x;
                })
                ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }])}
              dataSource={this.getDataSource([{ info: data[1]?.dataSource }])}
              hidePage={true}
              loading={loading}
              rowKey={'id'}
              rowClassName={Style.rowclassname}
            ></TableC>
          </div>
        )}
        {data[2]?.msg && (
          <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
            <SecondHeaderC
              title={data[2]?.msg}
              bottomHeight={false}
              Left={
                <div className={Style[iconInfo[data[2]?.state]?.className]} style={{ marginLeft: '20px' }}>
                  <img src={iconInfo[data[2]?.state]?.img} />
                  {iconInfo[data[2]?.state]?.name}
                </div>
              }
            />
          </div>
        )}
        {(data[2]?.dataSource?.length != 0 || loading) && (
          <div name={'syyh-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
            <TableC
              columns={data[2]?.columns
                ?.map((x) => {
                  if (x.key === 'productName' || x.key === 'sumWeight') {
                    return {
                      ...x,
                      render: (text, row, index) => {
                        const obj = {
                          children: text || '--',
                          props: {},
                        };
                        obj.props.rowSpan = row.rowSpan && row.rowSpan[x.key];
                        return obj;
                      },
                    };
                  }
                  if (x.key == 'amount') {
                    return {
                      ...x,
                      type: 'number',
                    };
                  }
                  if (x.key == 'value') {
                    return {
                      ...x,
                      type: 'money',
                    };
                  }
                  if (x.key == 'weight') {
                    return {
                      ...x,
                      align: 'right',
                    };
                  }
                  return x;
                })
                ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }])}
              rowClassName={Style.rowclassname}
              dataSource={this.getDataSource([{ info: data[2]?.dataSource }])}
              hidePage={true}
              loading={loading}
              rowKey={'id'}
            ></TableC>
          </div>
        )}

        <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
          <Spin spinning={loading}>
            <Row gutter={20}>
              <Col span={12}>
                <Cards bgurl={background1} name={'会计年度'} content={zcData?.time}></Cards>
              </Col>
              <Col span={12}>
                <Cards bgurl={background2} name={'总资产'} unit='亿' isEdit={true} content={zcData?.zzc} onClick={this.onSave2}></Cards>
              </Col>
            </Row>
          </Spin>
        </div>
        <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
          <Spin spinning={loading}>
            <Cards bgurl={background3} name={'非标资产占总资产权重'} content={fbWeight || '--'}></Cards>
          </Spin>
        </div>
      </>
    );
  }
}
export default connect(({ commercialBankReportM, loading }) => ({
  commercialBankReportM,
}))(nonStandardBond);
